<template>
  <div>
    <section v-if="showGoods && showGoodsInfo" class="shop-box" @click="clickShowGoodDetail">
      <img :src="$addXossFilter(showGoodsInfo.goodsCover)" class="c-ww84 c-hh84 c-br4" alt="">
      <div class="c-flex-column c-justify-sb c-ml10 c-w0 c-flex-grow1">
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-lh-n">{{showGoodsInfo.goodsName}}</div>
        <div class="c-flex-row c-fs26">
          <div class="c-fc-sorange c-flex-grow1 c-w0 c-lh-n">
            <span v-if="Number(showGoodsInfo.goodsPrice) > 0">{{'￥' | iosPriceFilter}}</span>
            <span>{{Number(showGoodsInfo.goodsPrice) > 0 ? showGoodsInfo.goodsPrice : '免费'}}</span>
          </div>
          <div class="theme-fc">查看商品</div>
        </div>

      </div>
    </section>
    <section v-if="showKeyPoint && keyPointInfo && keyPointInfo.content" class="knowledge-box">
      <div class="c-ww-bw c-wb-ba c-fs20 c-fc-white c-text-ellipsis2">{{keyPointInfo.content}}</div>
    </section>
  </div>
</template>

<script>
export default {
  name: "interactionShop",
  components: {},
  props: {
    showGoods: {
      type: Boolean,
      default: false
    },
    showKeyPoint: {
      type: Boolean,
      default: false
    },
    showGoodsInfo: {
      type: Object,
      default: null
    },
    keyPointInfo: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
    };
  },
  methods: {
    clickShowGoodDetail() {
      this.$emit('showGoodsDetail')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop-box {
  display: flex;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e4e7ed;
  border-radius: 0.2rem;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
}
.knowledge-box {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.1rem;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
}
</style>